<if condition="!empty($rec_event)">
    <div class="wtBox">
        <p class="wtTit">推荐活动</p>
        <div class="wtList">
            <volist name="rec_event" id="vo">
                <a class="wtEvt" href="{:U('Event/Index/detail',array('id'=>$vo['id']))}">
                    <img src="{$vo.cover_id|getThumbImageById=245,100}" alt="">
                    <div class="wtMask">
                        <p>{$vo.title}</p>
                        <p>{:date('Y-m-d',$vo['sTime'])}&#45;&#45;{:date('Y-m-d',$vo['eTime'])}</p>
                    </div>
                </a>
            </volist>
        </div>
    </div>
</if>
<style>
    .wtBox{
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
    }
    .wtTit{
        padding: 10px;
        font-size: 16px;
        border-bottom: 1px solid #ededed;
    }
    .wtList{
        padding: 10px;
    }
    .wtEvt{
        display: block;
        margin: 0 auto 10px;
        position: relative;
        width: 245px;
        height: 100px;
        border-radius: 3px;
        overflow: hidden;
        border: 1px solid #ededed;
    }
    .wtEvt:last-child{
        margin-bottom: 0;
    }
    .wtMask{
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.4);
        text-align: center;
        color: #fff;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .wtEvt:hover .wtMask{
        display: flex!important;
    }
</style>